<template>
    <section>
        <div class="good-container">
            <div class="header">
                <h4>所有商品</h4>
            </div>
            <div class="good-con">
                <el-tabs v-model="activeTab" @tab-click="handleClick">
                    <el-tab-pane label="出售中" name="sell"></el-tab-pane>
                    <el-tab-pane label="仓库中" name="house"></el-tab-pane>
                </el-tabs>
                <div class="good-con__title flex-box flex-box-display">
                    <div class="flex-box">
                        <category-list :category.sync="goodSort"></category-list>
                        <el-date-picker
                                v-model="goodTime"
                                type="date"
                                style="min-width:150px;"
                                placeholder="商品创建日期"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                        <el-input v-model="goodName" placeholder="商品名称"></el-input>
                        <el-button type="primary" @click="getGoodList" icon="el-icon-search"></el-button>
                    </div>
                    <div>
                        <el-button type="primary" @click="" plain>导入商品</el-button>
                        <el-button type="primary" @click="addItem">发布商品</el-button>
                    </div>
                </div>
                <div class="table-box">
                    <el-table :data="goodList" v-loading="tableLoading" style="width: 100%">
                        <el-table-column :resizable="false" label="商品图">
                            <template slot-scope="scope">
                                <img :src="scope.row.image" style="width: 60px;height:60px;" v-if="scope.row.image"/>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="商品信息">
                            <template slot-scope="scope">
                                <span>{{scope.row.name}}<br>{{scope.row.desc}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="售价" prop="sale_price" sortable>
                        </el-table-column>
                        <el-table-column :resizable="false" label="总销量">
                            <template slot-scope="scope">
                                <span>{{scope.row.sale_amount}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="库存">
                            <template slot-scope="scope">
                                <span>{{scope.row.number}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :resizable="false" label="创建时间" prop="created_at" sortable>
                        </el-table-column>
                        <el-table-column :resizable="false" prop="operation" label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button @click="editItem(scope.$index, scope.row.id)" type="primary">编辑</el-button>
                                <el-button v-if="activeTab === 'house'" @click="putAway(scope.row.id,scope.row)"
                                           type="primary" plain>上架
                                </el-button>
                                <el-button v-if="activeTab === 'sell'" @click="soldOut(scope.row.id,scope.row)"
                                           type="primary" plain>下架
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination" v-if="page.total">
                    <div>
                        共{{page.count}}页，每页{{pageSize}}条
                    </div>
                    <el-pagination layout="prev, pager, next" :total="page.total" prev-text="上一页" next-text="下一页"
                                   :page-size="pageSize"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>

        </div>
    </section>
</template>

<script>
    import CategoryList from '../../components/basic/CategoryList.vue';

    export default {
        components: {
            CategoryList
        },
        data() {
            return {
                activeTab: 'sell',

                goodSort: '',
                goodTime: '',
                goodName: '',

                goodList: [],
                tableLoading: true,
                goodSortOptions: [],

                pageCount: '',
                page: {
                    total: null,
                    count: null
                },
                pageSize: 20
            }
        },
        watch: {},
        computed: {},
        mounted() {
            this.getGoodList();
        },
        methods: {
            handleClick() {
                console.log('切换中');
                console.log('激活标签', this.activeTab);
                this.tableLoading = true;
                this.getGoodList();
            },
            genItem(data){
                axios
                    .get('admin_goods',{params:data})
                    .then(res => {
                        this.page.total = res.data.count;
                        this.page.count = Math.ceil(res.data.count / this.pageSize);
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.goodList = res;
                        if (res) {
                            this.goodList.forEach(item => {
                                item.slideshows = item.slideshow;
                                item.content_images = item.contents;
                                item.cat_id = item.categories.length > 0 ? item.categories.map(item => item.id).toString() : '';
                            })
                        }
                        this.tableLoading = false;
                    })
            },
            getGoodList(pagination=1) {
                const data = {
                    pagination,
                    pageSize: this.pageSize,
                    is_on_sale: this.activeTab === 'sell' ? 1 : 0,
                    category_id: this.goodSort ? this.goodSort.join(',') : '',
                    // name: this.goodName,
                    name: ['like', `%${this.goodName}%`],
                    created_at: this.goodTime,
                }
                this.genItem(data)
            },
            shelves(id, data, msg) {
                this.$confirm(`确认是否${msg}该商品?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        return axios
                            .post(`admin_goods/${id}`, data)
                            .then(
                                res => (res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg))
                            );
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: `${msg}成功!`
                        });
                        this.getGoodList();
                    })
                    .catch(err => {
                        if (err !== 'cancel') {
                            this.$message.error(err);
                        }
                    });
            },
            putAway(id,row) {
                const data = row;
                data.is_on_sale = 1;
                data._method = 'PUT';
                this.shelves(id, data, '上架')
            },
            soldOut(id,row) {
                const data = row;
                data.is_on_sale = 0;
                data._method = 'PUT';
                this.shelves(id, data, '下架')
            },
            addItem() {
                this.$router.push({name: 'GoodAdd', params: {title: '添加', method: 0, value: null}});
            },
            editItem(index, id) {
                console.log('id', id)
                this.$router.push({name: 'GoodEdit', query: {id: id}});
            },
            handleCurrentChange(current) {
                this.getGoodList(current)
            }
        }
    }
</script>
<style scoped>
    .good-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .good-con {
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .good-con__title {
        padding-bottom: 10px;
        border-bottom: 1px dashed #D8D8D8;
    }

    .table-box {
        min-height: calc(80vh - 92px);
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
    }


</style>
<style>

</style>